<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .nav a {
            display: inline-block;
            width: 120px;
            height: 58px;
            font-size: 20px;
            text-align: center;
            line-height: 48px;
            color: #fff;
            text-decoration: none;
        }

        .nav .blue {
            background: transparent url(image/blue.png) no-repeat scroll center;
        }

        .nav .blue:hover {
            background-image: url(image/deepblue.png);
        }

        .nav .orange {
            background: transparent url(image/orange.png) no-repeat scroll center;
        }

        .nav .orange:hover {
            background-image: url(image/deeporange.png);
        }

        .nav .pink {
            background: transparent url(image/pink.png) no-repeat scroll center;
        }

        .nav .pink:hover {
            background-image: url(image/deeppink.png);
        }

        .nav .purple {
            background: transparent url(image/purple.png) no-repeat scroll center;
        }

        .nav .purple:hover {
            background-image: url(image/deeppurple.png);
        }

        .nav .yellow {
            background: transparent url(image/yellow.png) no-repeat scroll center;
        }

        .nav .yellow:hover {
            background-image: url(image/deepyellow.png);
        }

        .box {
            line-height: 200px;
            text-align: center;
            font-size: 20px;
            width: 200px;
            height: 200px;
            border: 2px solid blue;
            border-top: 2px solid red;
        }

        table {
            width: 400px;
            height: 160px;
        }

        table,
        td,
        th {
            border: 1px solid black;
            border-collapse: collapse;
            font-size: 12px;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="nav">
        <a href="#" class="blue">五彩导航</a>
        <a href="#" class="orange">五彩导航</a>
        <a href="#" class="pink">五彩导航</a>
        <a href="#" class="purple">五彩导航</a>
        <a href="#" class="yellow">五彩导航</a>
    </div>
    <div class="box">
        盒子
    </div>
    <table align="center" cellspacing="0">
        <thead>
            <tr>
                <th>排名</th>
                <th>关键词</th>
                <th>趋势</th>
                <th>进入搜索</th>
                <th>最近七日</th>
                <th>相关链接</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>鬼吹灯</td>
                <td>↓</td>
                <td>12</td>
                <td>8</td>
                <td><a href="#">贴吧</a></td>
            </tr>
            <tr>
                <td>2</td>
                <td>鬼吹灯</td>
                <td>↓</td>
                <td>12</td>
                <td>8</td>
                <td><a href="#">贴吧</a></td>
            </tr>
            <tr>
                <td>3</td>
                <td>鬼吹灯</td>
                <td>↓</td>
                <td>12</td>
                <td>8</td>
                <td><a href="#">贴吧</a></td>
            </tr>
            <tr>
                <td>4</td>
                <td>鬼吹灯</td>
                <td>↓</td>
                <td>12</td>
                <td>8</td>
                <td><a href="#">贴吧</a></td>
            </tr>
        </tbody>
    </table>
</body>

</html>